<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/d3.v4.min.js"></script>
	<title>xuluo</title>
	<style type="text/css">
		line,path{stroke: #f40;}
	</style>
</head>
<body>
	<script type="text/javascript">
		var arc=d3.arc();
		var myData={
			innerRadius:80,
			outerRadius:100,
			startAngle:20,
			endAngle:2*Math.PI
		};
		var outData=arc(myData);
		var svg=d3.select('body').append('svg').attr('width',400).attr('height',400);
		/*svg.append('g').attr('transform','translate('+400/2+','+400/2+')').append('path').
		attr('fill','#000').attr('d',outData);*/

		/*var dataset=[50,100,150,200];
		var max=d3.max(dataset);
		var linear=d3.scaleLinear().domain([0,max]).range([0,300]);
		svg.selectAll('rect').data(dataset).enter().append('rect').attr('x',20)
		.attr('y',function(d,i){
			return 40*i;
		}).attr('width',function(d,i){
			return linear(d);
		}).attr('height',30).attr('fill','#f40');
		var axis=d3.axisBottom().scale(linear).ticks(4);
		svg.append('g').attr('transform',function(d,i){
			return 'translate('+20+','+155+')';
		}).call(axis);*/

		var dataset=[50,100,150,200];
		var linearY=d3.scaleLinear().domain([0,d3.max(dataset)]).range([300,0]);
		var linearX=d3.scaleLinear().domain([0,d3.max([0,4])]).range([0,300]);
		var axisY=d3.axisLeft().scale(linearY).ticks(4);
		var axisX=d3.axisBottom().scale(linearX).ticks(4);
		svg.selectAll('rect').data(dataset).enter().append('rect').attr('x',function(d,i){
			return linearX(i)+90;
		}).attr('y',function(d,i){
			return linearY(d)+80;
		}).attr('width',30).attr('height',function(d,i){
			return 300 - linearY(d);
		}).attr('fill',function(i){
			 return d3.color("hsl("+i * 17+", 80%, 50%)");
		});
		svg.append('g').attr('transform','translate(30,80)').call(axisY);
		svg.append('g').attr('transform','translate(30,380)').call(axisX);
	</script>
</body>
</html>